<template>
    <el-dialog
        :visible.sync="is_show"
        width="500px"
        title="请仔细核对缴款信息"
        center
        @closed="closed"
    >
        <div>
            <el-form
                :model="form"
                label-position="left"
                ref="form"
                label-width="100px"
            >
                <el-form-item
                    label="缴款时间"
                    prop="date"
                    :rules="[{ required: true, message: '请选择缴款时间', trigger: 'blur' }]"
                >
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="form.date"
                        type="date"
                        placeholder="选择缴款时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="缴款金额"
                    prop='money'
                    :rules='[{ required: true, message:"请输入缴款金额", trigger: "blur"}]'>

                    <el-input v-model="form.money"></el-input>
                </el-form-item>

            </el-form>
        </div>
        <template slot="footer">
            <el-button v-no-more-click:3000 @click="is_show = false">取消</el-button>
            <el-button v-no-more-click:3000 type="primary" @click="surePay">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            is_show: false,
            form: {
                date: '',
                money: '',
            },
            id: 0
        }
    },
    methods: {
        closed() {
            this.$refs['form'].resetFields();
        },
        showOn(data) {
            this.id = data.id
            switch (data.type) {
                case 'S':
                    this.form.money = 3075
                    break;
                case 'F':
                    this.form.money = 5560
                    break;
                case 'W':
                    this.form.money = 2075
                    break;
            }
            this.is_show = true
        },
        surePay() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$axios.put(
                        `/api/finals/${this.id}/consumer_pay_status`,{
                            consumer_pay_date: this.form.date,
                            confirm_money: `${this.form.money}`,
                        }
                    ).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: res.data.data,
                                type: 'success'
                            })
                            this.is_show = false
                            this.$emit('refresh')
                            // this.$router.go(0)
                        } else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            })
                        }
                    }).catch(e => {})
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-bottom: 10px;
    }
    .el-form-item {
        margin-bottom: 20px;
    }
    .el-date-editor {
        width: 100%;
    }
}
</style>
